<template>
  <div class="header">
    <div class="header-box">
      <div class="header-img-box">
        <!-- <img
          src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2712272764,1447965085&fm=26&gp=0.jpg"
          alt
        /> -->
        <img
          src="https://img0.baidu.com/it/u=3142513683,488688423&fm=26&fmt=auto&gp=0.jpg"
          alt
        />
        <span>Flower music</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.header {
  .header-box {
    display: flex;
  }
  .header-box {
    height: 50px;
    width: 100%;
  }
  .header-img-box {
    flex: 1;
    float: left;
    width: 176px;
    height: 69px;
    margin-left: 40px;
    > img {
      width: 55px;
      height: 55px;
      border-radius: 50%;

      padding: 6px;
    }
    > span {
      font-size: 18px;
      font-family: "Times New Roman", Georgia, Serif;
      position: relative;
      top: -33%;
      color: white;
      margin-left: 10px;
    }
  }
}
</style>